<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 300px;
      height: 200px;
      background-color: aqua;
      margin: 0 auto;
    }
    .name {
      width: 200px;
      height: 100px;
      margin: 0 auto;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      color: brown;
    }
    button {
      width: 80px;
      height: 30px;
      margin-left: 100px;
      margin-top: 20px;
    }
  </style>
  <body>
    <div class="box">
      <div class="name"></div>
      <button>匹配</button>
    </div>
    <script>
      let button = document.querySelector('button');
      let name = document.querySelector('.name');

      let arr = ['li', 'yu', 'ping', 'z', 'j', 'l', 'y', 'h'];
      let arr1 = [];
      name.innerText = `看看谁最帅`;
      function randomName() {
        let index = Math.floor(Math.random() * arr.length);
        if (arr.length != arr1.length) {
          if (arr1.indexOf(arr[index]) === -1) {
            name.innerText = arr[index];
            arr1.push(arr[index]);
          } else {
            randomName();
          }
        } else {
          name.innerText = `已全部获取过`;
        }
      }
      button.addEventListener('click', () => {
        randomName();
        console.log(arr1);
      });
    </script>
  </body>
</html>
